<template>
    <div id="index">
        <div class="banner">
            <!-- <el-carousel height="400px">
                <el-carousel-item v-for="item in advertList" >
                    <div class="banner" @click="toUrl(item.url)" :style="{'background-position': 'center center','background-image':'url('+backgroundImg(item.image)+')','height':'100%'}">
                    </div>
                </el-carousel-item>
            </el-carousel> -->
            <swiper style="height:400px" ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="item in advertList">
                    <div class="banner" @click="toUrl(item.url)" :style="{'background-position': 'center center','background-image':'url('+backgroundImg(item.image)+')','height':'100%'}">
                    </div>
                </swiper-slide>
            </swiper>
            <div class="banner_sub_width">
                <div class="banner_sub">
                    <div class="to_user_center" v-if="$store.state.isLogin">
                        <span @click="$router.push('/member/index')">进入会员中心</span>
                    </div>
                    <template v-else>
                        <div class="login_avatar">
                            <img src="@/assets/img/photo.png" alt="">
                            <p>Hi，欢迎来到{{$store.state.tenantInfo.company}}!</p>
                        </div>
                        <div class="login_btn clearfix">
                            <router-link to="login" class="left_login fl">
                                会员登录
                            </router-link>
                            <router-link to="register" class="left_login fl">
                                会员注册
                            </router-link>
                        </div>
                    </template>
                    <div class="sub_gg">
                        <h3>公告</h3>
                        <ul>
                            <router-link tag="li" v-for="(item,key) in articleList" :to="'/news?id='+item.id">{{item.title}}</router-link>
                        </ul>
                    </div>
                    <div class="other_block">
                        <div class="block" @click="$router.push('/member/inviter')">
                            <img src="@/assets/img/tool_intro.png" alt="">
                            <p>邀请好友</p>
                        </div>
                        <div class="block" @click="$router.push('/member/guide')">
                            <img src="@/assets/img/tool_step.png" alt="">
                            <p>代发指南</p>
                        </div>
                        <div class="block" @click="openQQ()">
                            <img src="@/assets/img/tool_app.png" alt="">
                            <p>在线客服</p>
                        </div>
                        <div class="block" @click="$router.push('/news')">
                            <img src="@/assets/img/tool_xinren.png" alt="">
                            <p>帮助中心</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main wrap">
            <div class="advertising">
                <div @click="$router.push('/goods/goodsList')">
                    <img src="@/assets/img/01.jpg" alt="">
                </div>
                <div @click="$router.push('/member/inviter')">
                    <img src="@/assets/img/02.jpg" alt="">
                </div>
                <div @click="$router.push('/goods/goodsList')">
                    <img src="@/assets/img/03.jpg" alt="">
                </div>
                <div @click="$router.push('/register')">
                    <img src="@/assets/img/04.jpg" alt="">
                </div>
            </div>
            <div class="recommend clearfix">
                <div class="item fl" @click="$router.push('/goods/goodsList')">
                    <div class="recommend_left">
                        <img src="@/assets/img/05-1.png" alt="">
                    </div>
                </div>
                <div class="item fl" v-for="item in hotgoodsList"  @click="buyGoods(item)">
                    <dl>
                        <dt>
                            <img :src="item.cover | fullPath" alt="">
                        </dt>
                        <dd class="title">
                            {{item.name}}
                        </dd>
                        <dd class="other clearfix">
                            <span class="price fl">￥{{(parseFloat(item.cost)+parseFloat(item.profit))}}</span>
                            <span class="wei fr">{{item.weight}} kg/件</span>
                        </dd>
                        <dd class="btn">立即购买</dd>
                    </dl>
                </div>
                <div class="item fl null" v-for="item in hotNull">
                    <img src="@/assets/img/15.png" alt="">
                </div>
            </div>
            <div class="new_goods_title">
                <span>新品上架</span>
            </div>
            <div class="recommend clearfix">
                <div class="item fl" @click="$router.push('/goods/goodsList')">
                    <div class="recommend_left">
                        <img src="@/assets/img/05-2.png" alt="">
                    </div>
                </div>
                <div class="item fl"  v-for="item in newestGoodsList"  @click="buyGoods(item)">
                    <dl>
                        <dt>
                            <img :src="item.cover | fullPath" alt="">
                        </dt>
                        <dd class="title">
                            {{item.name}}
                        </dd>
                        <dd class="other clearfix">
                            <span class="price fl">￥{{(parseFloat(item.cost)+parseFloat(item.profit))}}</span>
                            <span class="wei fr">{{item.weight}} kg/件</span>
                        </dd>
                        <dd class="btn">立即购买</dd>
                    </dl>
                </div>
                <div class="item fl null" v-for="item in newNull">
                    <img src="@/assets/img/15.png" alt="">
                </div>
            </div>
            <div class="section4">
                <span>新闻动态</span> 
                <div class="article_list">
                    <div class="article_item" v-for="item in articleList2" @click="$router.push('/news/'+item.id+'?type=2')">
                        <div class="title">
                            <a>{{item.title}}</a>
                            <p>{{$time.getDate(item.createTime)}}</p>
                        </div>
                        <div class="summary">{{item.summary}}</div>
                    </div>
                    <!-- <div class="article_item">
                        <div class="title">
                            <a>快递广告优势</a>
                            <p>2020-06-15</p>
                        </div>
                        <div class="summary">在快递单上做广告保证了每份广告至少有两人会仔细阅读，比传统的传单广告、平面广告更有效率。这样每份广告传达至两人手中，每份广告都有人浏览，不浪费。</div>
                    </div>
                    <div class="article_item">
                        <div class="title">
                            <a>什么是快递单广告传媒</a>
                            <p>2020-06-15</p>
                        </div>
                        <div class="summary">快递公司在全国各个大中小城市都有网点，广告的范围广，受众范围也广。一份快递纸媒在使用过程中，至少有5个人会接触到，比如收件人、收件单位的代收人、身边的同事等等，最终可能达到10 几个人甚至更多...</div>
                    </div>
                    <div class="article_item">
                        <div class="title">
                            <a>快递单广告的特点</a>
                            <p>2020-06-15</p>
                        </div>
                        <div class="summary">温柔的强迫性：快递单广告媒体上的广告会让客户在不知不觉中看到，不会让客户产生反感，让商家的广告信息自然的渗透进去。针对性：现在使用快递的大多数是白领、大学生等人群，所以快递商业联盟的广告通过快递的方式</div>
                    </div>
                    <div class="article_item">
                        <div class="title">
                            <a>小家电如何通过电商大数据精准引流客户？</a>
                            <p>2020-01-17</p>
                        </div>
                        <div class="summary">据《中国小家电行业产销需求与投资预测分析报告》统计数据显示，2020年中国小家电行业市场规模将突破4000亿元，未来五年(2020-2024)年均复合增长率约为12.63%，并预测...</div>
                    </div>
                    <div class="article_item">
                        <div class="title">
                            <a>【快递+广告】赚钱营销新思路</a>
                            <p>2020-01-17</p>
                        </div>
                        <div class="summary">快递业已经很发达了，中国的电子商务使得物流行业已经飞速发展，每天都有很多很多的快递从不同的地方发出，飞向不同的地方，这也就造就了一个新的趋势...</div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="xian"></div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            isLogin: false,
            articleList: [],
            articleList2:[],
            hotgoodsList:[],
            newestGoodsList:[],
            advertList:[],
            hotNull: 0,
            newNull: 0,
            swiperOptions: {
            　　loop:true,
                autoplay:true,
                initialSlide :1,
            }
        }
    },
    created(){
        var inviteCode = this.$route.query.inviteCode;
        if(inviteCode){
            localStorage.setItem('inviteCode',inviteCode);
        }
        let token = localStorage.getItem('dftToken')
        if(token){
            this.isLogin = true
        }else{
            this.isLogin = false
        }
        this.getArticle();
        this.getArticle2();
        this.getHotGoodsList();
        this.getAdvertList();
        // this.IsPC()
    },
    mounted(){},
    watch: {},
    methods: {
        IsPC(){  
            var userAgentInfo = navigator.userAgent;
            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
            var flag = true;  
            for (var v = 0; v < Agents.length; v++) {  
                if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
            }  
            if(!flag){
                this.$router.push('/m_index')
            }
        },
        backgroundImg(value){
            var host = document.location.host;
            var result = "";
            if(value && value.indexOf('files')!=-1 ){
                if(host.search('192')!=-1){
                    result = 'http://192.168.0.50:8080' + value
                }else{
                    result = document.location.protocol + "//" + host + '/' + value
                }
            }else{
                result = value;
            }
            return result;
        },
        //公告列表
        getArticle(){
             this.$request.post({
                url:'/ReportApi/business/newlists',
                params:{
                    pageNo:1,
                    pageSize:3,
                    type:1,
                },
                success: res => {
                    this.articleList = res[0];
                }
            })
        },
        //新闻列表
        getArticle2(){
             this.$request.post({
                url:'/ReportApi/business/newlists',
                params:{
                    pageNo:1,
                    pageSize:6,
                    type:2,
                },
                success: res => {
                    this.articleList2 = res[0];
                }
            })
        },
        //热销商品列表
        getHotGoodsList(){
            this.$request.post({
                url:'/ReportApi/business/goodlist',
                params:{
                    pageNo: 1,
                    pageSize: 11,
                    sort:3,
                    tenantid:localStorage.getItem('tenantInfoid')
                },
                success: res => {
                    this.hotgoodsList = res[0];
                    if(this.hotgoodsList.length < 11){
                        this.hotNull = 11 - this.hotgoodsList.length
                    }
                    this.getNewestGoodsList();
                }
            })
        },
        //最新商品
        getNewestGoodsList(){
            this.$request.post({
                url:'/ReportApi/business/goodlist',
                params:{
                    pageNo: 1,
                    pageSize: 11,
                    sort:5,
                    tenantid:localStorage.getItem('tenantInfoid')
                },
                success: res => {
                    this.newestGoodsList = res[0];
                    if(this.newestGoodsList.length < 11){
                        this.newNull = 11 - this.newestGoodsList.length
                    }
                }
            })
        },
        buyGoods(item){
            this.$store.commit('getGoodsInfo',item)
            this.$router.push('/member/send_order');
        },
        openQQ() {
            var url = 'tencent://message/?uin=' + this.$store.state.tenantInfo.qq + '&amp;Site=&amp;Menu=yes';
            window.open(url,'_self')
        },
        getAdvertList(){
            this.$request.post({
				url:'/ReportApi/business/advert',
				params:{
                    type:1,
                    tenantId: localStorage.getItem("tenantInfoid")
				},
				success:res => {
                    this.advertList = res;
                    //consloe.log(res);
				},
				finally: () => {
				}
			})
        },
        toUrl(url){
            if(url.indexOf('http')!=-1){
                window.open(url);
            }else{
                this.$router.push(url);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#index{
    .banner{
        position: relative;
        cursor: pointer;
    }
    .banner_sub_width{
        top: 0;
        height: 400px;
        z-index: 999;
        left: 50%;
        margin-left: -600px;
        position: absolute;
        .banner_sub{
            width: 220px;
            margin-top: 10px;
            height: 380px;
            background: #fff;
            border-radius: 4px;
        }
        .login_avatar{
            color: #999;
            text-align: center;
            font-size: 12px;
            img{
                border-radius: 50%;
                margin-bottom: 10px;
                margin-top: 10px;
                width: 50px;
                height: 50px;
            }
        }
        .to_user_center{
            width: 220px;
            padding: 48px 0;
            span{
                background: #f80;
                color: #fff;
                line-height: 30px;
                width: 180px;
                text-align: center;
                border-radius: 4px;
                margin: 0 auto;
                display: block;
                cursor: pointer;
            }
        }
        .login_btn{
            margin-top: 10px;
            .left_login{
                width: 70px;
                line-height: 25px;
                font-size: 14px;
                border: 1px solid #f80;
                border-radius: 3px;
                margin-left: 28px;
                text-align: center;
                &:hover{
                    cursor: pointer;
                }
                &:first-child{
                    color: #f80;
                    &:hover{
                        background: #f80;
                        color: #fff;
                    }
                }
                &:last-child{
                    background: #f80;
                    color: #fff;
                }
            }
        }
        .sub_gg{
            padding: 8px 25px;
            box-sizing: border-box;
            margin-top: 10px;
            border-top: 1px solid #f1f1f1;
            font-size: 12px;
            h3{
                font-size: 14px;
                margin-bottom: 5px;
            }
            li{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 25px;
                color: #999;
            }
        }
        .other_block{
            .block{
                border-top: 1px solid #dedede;
                float: left;
                width: 110px;
                height: 63px;
                background: #fbfbfb;
                box-sizing: border-box;
                font-size: 12px;
                text-align: center;
                &:first-child,&:nth-child(3){
                    border-right: 1px solid #dedede;
                }
                img{
                    width: 24px;
                    height: 24px;
                    margin-top: 8px;
                    margin-bottom: 5px;
                }
                &:hover{
                    background: #eaeaea;
                    cursor: pointer;
                }
            }
        }
    }
    .main{
        .advertising{
            display: flex;
            margin-top: 10px;
            div{
                flex: 1;
                img{
                    border-radius: 4px;
                    cursor: pointer;
                }
            }
        }
        .recommend{
            margin-top: 20px;
            .item{
                height: 290px;
                margin-left: 11px;
                margin-bottom: 12px;
                .recommend_left{
                    height: 290px;
                    width: 190px;
                    img{
                        width: 190px;
                        height: 290px;
                    }
                    &:hover{
                        cursor: pointer;
                    }
                }
                &:nth-child(1),&:nth-child(7){
                    margin-left: 0;
                }
                dl{
                    width: 188px;
                    border: 1px solid #eee;
                    &:hover{
                        cursor: pointer;
                        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
                    }
                    img{
                        width: 188px;
                        height: 188px;
                    }
                    dd{
                        padding: 0 5px;
                    }
                    .title{
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: 12px;
                        color: #999;
                        line-height: 28px;
                    }
                    .other{
                        .price{
                            font-size: 18px;
                            color: #f80;
                        }
                        .wei{
                            font-size: 14px;
                            color: #666;
                        }
                    }
                    .btn{
                        width: 170px;
                        line-height: 28px;
                        text-align: center;
                        color: #f80;
                        border: 1px solid #f80;
                        box-sizing: border-box;
                        border-radius: 4px;
                        margin: 6px auto 10px auto;
                        display: block;
                        height: 28px;
                        font-size: 14px;
                        &:hover{
                            color: #fff;
                            background: #f80;
                        }
                    }
                }
            }
            .null{
                width: 188px;
                border: 1px solid #eee;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .new_goods_title{
            height: 40px;
            border-bottom: 1px solid #efefef;
            margin-top: 40px;
            margin-bottom: 30px;
            span{
                font-size: 20px;
                line-height: 28px;
                border-left: 5px solid #f80;
                padding-left: 15px;
                font-weight: bold;
                font-size: 20px;
            }
        }
        .section4{
            position: relative;
            text-align: center;
            margin-bottom: 25px;
            background: #fff;
            &>span{
                position: relative;
                display: inline-block;
                margin: 25px auto;
                font-weight: 700;
                font-size: 22px;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    display: inline-block;
                    background: -webkit-gradient(linear,left top,right top,from(rgba(255,166,0,.929412)),to(#ff6a00));
                    background: linear-gradient(90deg,rgba(255,166,0,.929412),#ff6a00);
                    width: 40%;
                    border-radius: 50px;
                    height: 4px;
                }
            }
            .article_list{
                text-align: left;
                display: -webkit-box;
                display: flex;
                -webkit-box-pack: justify;
                justify-content: space-between;
                flex-wrap: wrap;
                .article_item{
                    border: 1px solid #eee;
                    padding: 10px 30px;
                    margin: 10px 0;
                    width: 44%;
                    cursor: pointer;
                    &:hover{
                        box-shadow: 0 0 5px 1px #dcdfe6;
                        .title a{
                            color: #ff6a00;
                        }
                    }
                    .title{
                        display: -webkit-box;
                        display: flex;
                        -webkit-box-pack: justify;
                        justify-content: space-between;
                        margin-bottom: 10px;
                    }
                    .summary{
                        color: #767676;
                        font-size: 14px;
                    }
                    .title a{
                        font-size: 18px;
                        color: #333;
                    }
                    .title{
                        p{
                            color: #999;
                        }           
                    }
                }
            }
        }
    }
    .xian{
        height: 5px;
        background: #eee;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}

</style>